<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Client APP Demo</title>
<link rel="stylesheet"
	href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script
	src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script
	src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.js"></script>

</head>
<body>
	<div class="navbar navbar-default">
		<div class="container ">
			<p class="navbar-text">Client APP Demo</p>
		</div>
	</div>
	<div class="container ">
		<div class="row">
			<div class="col-md-9">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">基本配置</h3>
					</div>
					<div class="panel-body">
						<div class="form-horizontal">
							<div class="form-group">
								<label class="col-md-4 control-label" for="openapi">open
									api</label>
								<div class="col-md-4">
									<input id="openapi" name="openapi" type="text" placeholder=""
										class="form-control input-md" value="{{openapi}}" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-4 control-label" for="service_uri">资源接口URI</label>
								<div class="col-md-4">
									<input id="service_uri" name="service_uri" type="text" placeholder=""
										class="form-control input-md" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-4 control-label" for="method_name">请求方法</label>
								<div class="col-md-4">
									<select class="form-control input-md" id="method_name"
										name="method_name">
										<option value="get">GET</option>
										<option value="post">POST</option>
										<option value="put">PUT</option>
										<option value="delete">DELETE</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-4 control-label" for="client_id">client
									id</label>
								<div class="col-md-4">
									<input id="client_id" name="client_id" type="text" placeholder=""
										class="form-control input-md" value="{{client_id}}" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-4 control-label" for="client_secret">client
									secret</label>
								<div class="col-md-4">
									<input id="client_secret" name="client_secret" type="text" placeholder=""
										class="form-control input-md" value="{{client_secret}}" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-4 control-label" for="tenant_id">tenant</label>
								<div class="col-md-4">
									<input id="tenant_id" name="tenant_id" type="text" placeholder=""
										class="form-control input-md" value="{{tenant}}" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-4 control-label" for="token">access token</label>
								<div class="col-md-4">
									<input id="token" name="token" type="text" placeholder=""
										class="form-control input-md" value="{{token}}" />
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">请求头</h3>
					</div>
					<div class="panel-body">
						<div id="header-cfg" class="form-horizontal">
							<div class="form-group">
								<label class="col-md-4 control-label" for="X-Okapi-Tenant">X-Okapi-Tenant
									id</label>
								<div class="col-md-4">
									<input name="X-Okapi-Tenant" type="text" placeholder=""
										class="form-control input-md" value="{{tenant}}" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-4 control-label" for="X-Okapi-Token">X-Okapi-Token</label>
								<div class="col-md-4">
									<input name="X-Okapi-Token" type="text" placeholder=""
										class="form-control input-md" value="{{token}}" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-4 control-label" for="Content-Type">Content-Type</label>
								<div class="col-md-4">
									<input name="Content-Type" type="text" placeholder=""
										class="form-control input-md" value="application/json; text/plain;" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-4 control-label" for="Accept">Accept</label>
								<div class="col-md-4">
									<input name="Accept" type="text" placeholder=""
										class="form-control input-md" value="application/json; text/plain;" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-4 control-label" for="X-Real-IP">X-Real-IP</label>
								<div class="col-md-4">
									<input name="X-Real-IP" type="text" placeholder=""
										class="form-control input-md" value="127.0.0.1" />
								</div>
							</div>
						</div>
					</div>
					<div class="panel-footer clearfix">
						<div class="pull-right">
							<button id="head-adder" class="btn btn-sm btn-success">+</button>
						</div>
					</div>

				</div>

				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">请求参数</h3>
					</div>
					<div class="panel-body">
						<div id="params-cfg" class="form-horizontal"></div>
					</div>
					<div class="panel-footer clearfix">
						<div class="pull-right">
							<button id="param-adder" class="btn btn-sm btn-success">+</button>
						</div>
					</div>
				</div>

				<div class="panel panel-default">
					<div class="panel-body">
						<input id="cfg_btn" name="request_btn" type="button"
							class="btn btn-default" value="配置资源服务请求"></input>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-3"></div>
	</div>
	<footer class="footer"></footer>
	<div>
		<form method="POST" id="config_form" name="config_form" action="/configure/service">
			<input id="svrInfo" name="svrInfo" type="text" value=""  hidden="true"/>
			<input id="reqHeaders" name="reqHeaders" type="text" value="" hidden="true" />
			<input id="reqParams" name="reqParams" type="text" value="" hidden="true"/>
		</form>
	</div>
</body>
<script type="text/javascript">
	$(document)
			.ready(
					function() {

						$('#head-adder')
								.click(
										function() {
											var i = $('#header-cfg').find(
													"div.form-group").length;
											i = i + 1;
											$('#header-cfg')
													.append(
															"<div class=\"form-group\">"
																	+ "<div class=\"col-md-2\"></div>"
																	+ "<div class=\"col-md-2\"><input name=\"param_key_"+i+"\" type=\"text\" placeholder=\"key_"+i+"\" class=\"form-control input-md\" value=\"\" /></div>"
																	+ "<div class=\"col-md-4\"><input name=\"param_value_"+i+"\" type=\"text\" placeholder=\"value_"+i+"\" class=\"form-control input-md\" value=\"\" /></div>"
																	+ "</div>");
										});

						$('#param-adder')
								.click(
										function() {
											var i = $('#params-cfg').find(
													"div.form-group").length;
											i = i + 1;
											$('#params-cfg')
													.append(
															"<div class=\"form-group\">"
																+ "<div class=\"col-md-2\"></div>"
																+ "<div class=\"col-md-2\"><input name=\"param_key_"+i+"\" type=\"text\" placeholder=\"key_"+i+"\" class=\"form-control input-md\" value=\"\" /></div>"
																+ "<div class=\"col-md-4\"><input name=\"param_value_"+i+"\" type=\"text\" placeholder=\"value_"+i+"\" class=\"form-control input-md\" value=\"\" /></div>"
															+ "</div>");
										});
						
						$('#cfg_btn').click(function(){
							
							
							var svrInfo = {
								"openapi": $('#openapi').val(),
								"service_uri": $('#service_uri').val(),
								"method_name": $('#method_name').val(),
								"client_id": $('#client_id').val(),
								"client_secret": $('#client_secret').val(),
								"tenant_id": $('#tenant_id').val()
							};
							//alert(JSON.stringify(basic_cfg));
							
							var hcfgs = $('#header-cfg').find("div.form-group")
							var reqHeaders = {};
							hcfgs.each(function(){
								var ele = $(this);
								var length = ele.children("label").length;
								if(length){
									var obj = ele.find("input").first();
									var name = obj.attr("name");
									var value = obj.val();
									reqHeaders[name] = value;
								}else{
									var obj0 = ele.find("input").eq(0);
									var obj1 = ele.find("input").eq(1);
									if(obj0.val() !== ''){
										reqHeaders[obj0.val()] = obj1.val();
									}
								}
							});
							//alert(JSON.stringify(header_cfg));
							
							var pcfgs = $('#params-cfg').find("div.form-group")
							var reqParams = {};
							pcfgs.each(function(){
								var ele = $(this);
								var length = ele.children("label").length;
								if(length){
									var obj = ele.find("input").first();
									var name = obj.attr("name");
									var value = obj.val();
									reqParams[name] = value;
								}else{
									var obj0 = ele.find("input").eq(0);
									var obj1 = ele.find("input").eq(1);
									if(obj0.val() !== ''){
										reqParams[obj0.val()] = obj1.val();
									}
								}
							});
							
							//alert(JSON.stringify(params_cfg));
							
							$('#svrInfo').val(JSON.stringify(svrInfo));
							$('#reqHeaders').val(JSON.stringify(reqHeaders));
							$('#reqParams').val(JSON.stringify(reqParams));
							$('#config_form').submit();
						});
					});
</script>
</html>
